<style scoped>
  @import "../../static/css/weui.css";
  @import "../../static/css/jquery-weui.min.css";
  .weui_cells:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
  }
  .weui_cells_form .weui_cell_ft {
    transform: scale(0.7);
  }
</style>
<template>
  <div id="app-main">
    <form id="registerForm">
      <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
          <div class="weui_cell_hd"><img src="@/assets/identification-card.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
          <div class="weui_cell_bd weui_cell_primary">
            <select class="weui-select" name="type" v-model="model.userType">
              <option value="" disabled>请选择用户类型</option>
              <option v-for="dict in types" :value="dict.dictValue" :key="dict.dictValue">{{dict.dictLabel}}</option>
            </select>
<!--            <input class="weui_input"  id="userType1"  name="userType1" type="text" value="管理员" data-values="2" placeholder="选择用户身份"/>-->
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_hd"><img src="@/assets/yonghu.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input"  id="realName"  name="realname" v-model="model.nickName" @blur="takeNickName"  placeholder="输入姓名"/>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_hd"><img src="@/assets/mobile.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input"  id="telphone"  name="loginname" type="number" v-model="model.phonenumber" pattern="[0-9]*" placeholder="输入手机号码"/>
          </div>
        </div>
        <div class="weui_cell ">
          <div class="weui_cell_hd"><img src="@/assets/mima.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" id="password" name="password" type="password" v-model="model.password" placeholder="设置登录密码"/>
          </div>
        </div>
        <div class="weui_cell ">
          <div class="weui_cell_hd"><img src="@/assets/mima.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" id="password1" name="password1" type="password" v-model="model.password1" pattern="[0-9]*" placeholder="再次输入密码"/>
          </div>
        </div>
        <template v-if="model.userType == 1">
          <div class="weui-cells__title" style="text-align: left;margin-left: 15px;">银行账户信息</div>
          <div class="weui_cell">
            <div class="weui_cell_hd"><img src="@/assets/yonghu.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" name="bankName" v-model="model.bankName"  placeholder="输入户名"/>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_hd"><img src="@/assets/bank2.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" name="bank" v-model="model.bank"  placeholder="输入开户行"/>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_hd"><img src="@/assets/bankacct.png" style="width:30px;height:24px;vertical-align: middle;"/></div>
            <div class="weui_cell_bd weui_cell_primary">
              <input class="weui_input" name="bankcode" v-model="model.bankcode"  placeholder="输入银行账号"/>
            </div>
          </div>
        </template>
      </div>
      <span id="warmingspan" style="display: inline-block;padding:5px 15px;"></span>
      <div class="weui_cells weui_cells_form">
        <div class="weui_cell weui_vcode">
          <div class="weui_cell_hd"><label class="weui_label" style="min-width: 60px;">验证码</label></div>
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" id="yanzhengma" name="yanzhengma" v-model="model.yanzhengma" type="number" placeholder="请输入验证码"/>
          </div>
          <div class="weui_cell_ft">
            <a href="javascript:;" @click='validateYz()' class="weui_btn weui_btn_plain_primary" ref="yzbtn">获取短信验证</a>
          </div>
        </div>
      </div>
      <div class="weui_cells weui_cells_checkbox">
        <label class="weui_cell weui_check_label" for="s11">
          <div class="weui_cell_hd">
            <input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
            <i class="weui_icon_checked"></i>
          </div>
          <div class="weui_cell_bd weui_cell_primary">
            <p style="text-align: left;font-size: 12px;">我已阅读并同意<a href="#">《土豆集服务协议》 </a></p>
          </div>
        </label>
      </div>
      <div class="weui_btn_area">
        <a class="weui_btn weui_btn_primary" href="javascript:" @click="doRegist();" id="showTooltips">注册</a>
      </div>
      <div align="center" style="margin-top:20px;">
        <a  href="javascript:;" @click="$router.push({name: 'signin'})" style="color:blue;font-size: 12px;">已有土豆集账号></a>
<!--        <a  href="/weixin/WechatLogin!loginpage.action" style="color:blue;font-size: 12px;">已有土豆集账号></a>-->
      </div>
    </form>
  </div>
</template>

<script type="text/babel">
  var wait = 60;//倒计时初始值
  export default {
    name: 'signup',
    data: () => ({
      types: [],
      model: {
        userType: '',
        nickName: '',
        phonenumber: '',
        bankName: '',
        password: '',
        password1: '',
        yanzhengma: ''
      },
      initStatus: true
    }),
    components: {
    },
    created() {
      this.getTypes();
    },
    mounted() {
    },
    methods: {
      takeNickName: function (val) {
        if (this.model.bankName) return;
        this.model.bankName = val.target.value;
      },
      getTypes: async function() {
        let that = this;
        await this.axios({
          method: 'get',
          url: '/prod-api/system/dict/data/type/user_type',
        }).then(response => {
          if (response.data.code == 200) {
            that.types = response.data.data;
          } else {
            this.toastText('获取用户类型数据失败');
          }
        });
      },
      validateYz: function(){
        if (!this.initStatus) return;
        let that = this;
        var re = /^(1[3-9][0-9])\d{8}$/i;
        if(!re.test(this.model.phonenumber)){
          // $("#warmingspan").css("color","red");
          // $("#warmingspan").html("请输入正确的手机号！");
          this.toastText('请输入正确的手机号！')
          return false;
        }
        this.toastText("验证码已发送");
        $.ajax({
          type: "GET",
          url: '/prod-api/wechat/getSmsCode',
          data: {phoneNumber: this.model.phonenumber},
          success: function (res) {
            if (res.code == 200) {
              $("#warmingspan").css("color","blue");
              $("#warmingspan").html("验证码已经发送，注意查收");
              that.time();
            }else if(res.msg){
              $("#warmingspan").css("color","red");
              $("#warmingspan").html(res.msg);
            }else {
              $("#warmingspan").css("color","red");
              $("#warmingspan").html("验证码发送失败，请联系系统管理员！");
            }
          }
        });
      },
      time: function(){
        let o = this.$refs.yzbtn;
        if(wait == 0){
          o.setAttribute("href","javascript:void(0);");
          this.initStatus = true;
          o.innerHTML="免费获取验证码";
          wait = 60;
        }else{
          o.removeAttribute("href");
          this.initStatus = false;
          o.innerHTML = wait+"秒后重新获取";
          wait--;
          setTimeout(() => {
            this.time()
          }, 1000)
        }
      },
      doRegist: function(){
        let that = this;
        if(!this.model.userType){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("请选择用户身份");
          return false;
        }

        if(!this.model.nickName){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("请输入姓名");
          return false;
        }
        var re = /^(1[3-9][0-9])\d{8}$/i;
        if(!re.test(this.model.phonenumber)){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("请输入正确的手机号");
          return false;
        }

        if(that.model.userType == 1){
          if(!that.model.bankName){
            $("#warmingspan").css("color","red");
            $("#warmingspan").html("请输入户名");
            return false;
          }

        }

        var password = this.model.password;
        var password1 = this.model.password1;
        if(typeof(password)=="undefined"||null==password||password==''){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("请输入密码");
          return false;
        }
        if(password != password1){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("两次密码输入不一致，请重新输入");
          return false;
        }
        var code = this.model.yanzhengma;
        if(code.length <= 0){
          $("#warmingspan").css("color","red");
          $("#warmingspan").html("请输入验证码");
          return false;
        }
        // $.ajax({
        //   type: "POST",
        //   url: '/prod-api/wechat/wechatRegist?smsCode=' + code,
        //   contentType: "application/json",
        //   data: JSON.stringify({userName: telphone, nickName: this.model.nickName, phonenumber: telphone, userType: that.model.userType, password: password}),
        //   success: function(res) {
        //     if (res.code == 200) {
        //       that.toastSuccess('注册成功');
        //       setTimeout(() => {
        //         // location.href="${path}weixin/WechatLogin!loginpage.action";
        //         that.$router.push({name: 'login'});
        //       }, 1000)
        //     } else if (res.msg) {
        //       that.toastText(res.msg);
        //     } else {
        //       that.toastText("系统错误");
        //     }
        //   }
        // });
        this.axios({
          method: 'post',
          url: '/prod-api/wechat/wechatRegist?smsCode=' + code,
          data: this.model
        }).then(response => {
          if (response.data.code == 200) {
            that.toastSuccess('注册成功');
            setTimeout(() => {
              // location.href="/weixin/WechatLogin!loginpage.action";
              that.$router.push({name: 'signin'});
            }, 1000)
          } else if (response.data.msg) {
            that.toastText(response.data.msg);
          } else {
            that.toastText("系统错误");
          }
        });
      }
    }
  };
</script>
